<template>
  <page-meta :page-style="$theme.pageStyle">
    <!-- #ifndef H5 -->
    <navigation-bar
        :front-color="$theme.navColor"
        :background-color="$theme.navBgColor"
    />
    <!-- #endif -->
  </page-meta>
  <view class="index" :style="pageStyle">
    <page-bg></page-bg>

    <!--顶部-->
    <u-navbar
        :safeAreaInsetTop="false"
        :placeholder="false"
        :is-back="true"
        :is-fixed="true"
        :title="'收支明细'"
        :border-bottom="false"
        :title-bold="true"
        :title-color="'#111111'"
        :background="{ background : navBg }"
    >
    </u-navbar>


    <view class="page-card">
      <image class="card-bg" mode="aspectFit" :src="`${$domain}/static/icons/matchmaker/qianbao.svg`"></image>
      <view class="card-con">
        <view class="con-data">
          <view class="data-top">
            <view class="top-title">
              可提现额度（元）
            </view>
            <view class="top-right">
              <view class="right-text">累计赚了：￥234.00</view>
            </view>
          </view>
          <view class="data-number">
            <view class="number-text">
              22,123
            </view>
            <view class="number-btn">
              立即提现
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="px-[30rpx]">
      <tabs
          :current="navCurrent"
          @change="navChange"
          bar-width="60"
          :isScroll="false"
          :activeColor="'#111'"
          :bgColor="'transparent'"
          :stickyBgColor="'transparent'"
          :fontSize="36"
          :bold="true"
          :inactiveColor="'#888'"
          :barStyle="{
          bottom: '-8rpx',
          height: '8rpx',
          borderRadius: '8rpx',
          backgroundColor: 'transparent',
          backgroundImage: 'linear-gradient(to right, var(--color-primary), var(--color-minor))'
        }"
      >
        <tab v-for="(item, i) in navList" :key="i" :name="item.name"></tab>
      </tabs>

      <view class="page-list">
        <view class="list-child">
          <view class="child-top">
            <view class="top-title">
              人员注册
            </view>
            <view class="top-number">
              +10
            </view>
          </view>
          <view class="child-data">
            <view class="data-time">
              2023-12-11   13:23
            </view>
            <view class="data-text">
              比例:20%
            </view>
          </view>
        </view>
        <view class="list-child">
          <view class="child-top">
            <view class="top-title">
              人员注册
            </view>
            <view class="top-number">
              +10
            </view>
          </view>
          <view class="child-data">
            <view class="data-time">
              2023-12-11   13:23
            </view>
            <view class="data-text">
              比例:20%
            </view>
          </view>
        </view>
        <view class="list-child">
          <view class="child-top">
            <view class="top-title">
              人员注册
            </view>
            <view class="top-number">
              +10
            </view>
          </view>
          <view class="child-data">
            <view class="data-time">
              2023-12-11   13:23
            </view>
            <view class="data-text">
              比例:20%
            </view>
          </view>
        </view>
        <view class="list-child">
          <view class="child-top">
            <view class="top-title">
              人员注册
            </view>
            <view class="top-number">
              +10
            </view>
          </view>
          <view class="child-data">
            <view class="data-time">
              2023-12-11   13:23
            </view>
            <view class="data-text">
              比例:20%
            </view>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script setup lang="ts">
import {computed, reactive, ref} from 'vue'
import {onPageScroll} from "@dcloudio/uni-app";

const navBg = ref<string>('rgba(255,255,255,0)')

onPageScroll((event: any) => {
  navBg.value = event.scrollTop > 10 ? '#fff' : 'rgba(255,255,255,0)'
})

const navChange = (item: any) => {
  console.log('item', item)
}

const navCurrent = ref(0)
const navList = ref([
  {
    name: '收益明细',
    id: '',
  },
  {
    name: '支出明细',
    id: 1,
  }
])

const navTo = (url: any) => {
  uni.navigateTo({url})
}
</script>

<style lang="scss" scoped>
.index {
  padding-bottom: 60rpx;
  position: relative;
  background-repeat: no-repeat;
  background-size: 100% auto;
  overflow: hidden;
  width: 100%;
  transition: all 1s;
  min-height: calc(100vh - env(safe-area-inset-bottom));
}

.page-card {
  width: calc(100% - 60rpx);
  margin: 30rpx auto;
  overflow: hidden;
  background: linear-gradient(154deg, var(--color-primary) 29%, var(--color-minor) 79%);
  box-shadow: inset 0 1px 22px 0 rgba(255, 255, 255, 0.5);
  border-radius: 30rpx;
  position: relative;

  .card-bg {
    position: absolute;
    right: -10%;
    top: 0;
    width: 450rpx;
    height: 450rpx;
    opacity: 0.3;
  }

  .card-con {
    position: relative;
    z-index: 1;

    .con-data {
      padding: 30rpx;

      .data-top {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .top-title {
          color: #ffffff;
          font-size: 30rpx;
          font-weight: bold;
          opacity: 0.6;
        }

        .top-right {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          font-size: 28rpx;
          color: #ffffff;

          .right-icon {
            width: 28rpx;
            height: 28rpx;
          }

          .right-text {
            opacity: 0.6;
            margin-left: 10rpx;
          }
        }
      }

      .data-number {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .number-text {
          font-size: 70rpx;
          color: #fff;
          font-weight: bold;
        }

        .number-btn {
          padding: 10rpx 30rpx;
          font-size: 30rpx;
          background-color: rgba(255, 255, 255, 0.1);
          border-radius: 40rpx;
          color: #ffffff;
        }
      }
    }

    .con-user {
      padding: 30rpx;
      display: flex;
      align-items: center;
      border-top: 1rpx solid rgba(255, 255, 255, 0.2);

      .user-pic {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        border: 2rpx solid #ffffff;
        flex-shrink: 0;
      }

      .user-name {
        width: 100%;
        color: #ffffff;
        margin: 0 20rpx;
        font-size: 30rpx;
        font-weight: bold;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-all;
      }

      .user-money {
        color: #ffffff;
        font-size: 28rpx;
        flex-shrink: 0;
      }
    }
  }
}

.page-data {
  width: calc(100% - 60rpx);
  margin: 30rpx auto;
  background-color: #ffffff;
  padding: 30rpx;
  border-radius: 30rpx;

  .data-three {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20rpx;
    margin-bottom: 20rpx;

    .three-one {
      text-align: center;
      color: #959595;
      font-size: 28rpx;
      background-color: #FFF5F1;
      padding: 30rpx 10rpx;
      border-radius: 10rpx;

      .one-number {
        font-size: 44rpx;
        margin-bottom: 20rpx;
        color: #111;
        font-weight: bold;
      }

      &:nth-child(2) {
        background-color: #F5F7FF;
      }
    }
  }

  .data-tip {
    font-size: 28rpx;
    color: #666666;
    line-height: 1.6;
  }
}

.page-choose {
  position: relative;
  width: calc(100% - 60rpx);
  margin: 30rpx auto;
  padding: 30rpx;
  box-shadow: inset 0 4px 10px 0 rgba(255, 255, 255, 0.4);
  background: linear-gradient(139deg, var(--color-primary) 37%, var(--color-minor) 70%);
  overflow: hidden;
  border-radius: 30rpx;

  .choose-bg {
    position: absolute;
    left: -48rpx;
    top: -742rpx;
    width: 774rpx;
    height: 1024rpx;
    opacity: 0.2;
  }

  .choose-con {
    .con-title {
      font-size: 28rpx;
      color: #ffffff;
      font-weight: bold;
      margin-bottom: 20rpx;
    }

    .con-bottom {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20rpx;

      .bottom-btn {
        padding: 10rpx 30rpx;
        font-size: 30rpx;
        background-color: rgba(255, 255, 255, 0.3);
        border-radius: 40rpx;
        color: #ffffff;
        text-align: center;
      }
    }
  }
}

.page-list {
  border-radius: 30rpx;
  overflow: hidden;
  margin-top: 30rpx;
  .list-child {
    background-color: #ffffff;
    padding: 30rpx;
    border-bottom: 1rpx solid #eeeeee;
    &:last-child {
      border: none;
    }
    .child-top {
      font-size: 32rpx;
      font-weight: bold;
      color: #111111;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      .top-number {
        color: var(--color-primary);
        font-size: 44rpx;
        font-weight: bold;
        margin-left: 20rpx;
      }
    }
    .child-data {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      font-size: 24rpx;
      color: #999999;
      .data-text {
        color: var(--color-primary);
        margin-left: 20rpx;
      }
    }
  }
}
</style>
